/* eslint-disable @typescript-eslint/no-explicit-any */
import { useForm } from 'antd/es/form/Form';
import { Button, Form, Input, message } from 'antd';
import styles from './register.module.less'
import { register, registerCaptcha } from '../../interfaces';
import { useNavigate,Link } from 'react-router-dom';





function Register() {
    const [form] = useForm();
    const navigate = useNavigate();
    // 发送验证码
    async function sendCaptcha() {
        const address = form.getFieldValue('email')
        if (!address) {
            return message.error('请输入邮箱地址')
        }
        try {
            const res = await registerCaptcha(address)
            if (res.status === 201 || res.status === 200) {
                message.success('验证码发送成功，请注意查收')
            }
        } catch (e: any) {
            message.error(e.response?.data?.message || '验证码发送失败，请稍后再试')
        }
    }
    //注册
    const onFinish = async (values: RegisterUser) => {
        if (values.password !== values.confirmPassword) {
            return message.error('两次密码不一致');
        }
        const res = await register(values);
    
        if (res.status === 201 || res.status === 200) {
            message.success('注册成功');
            setTimeout(() => {
                navigate('/login');
            },1000)
        } else {
            message.error(res.data.data || '系统繁忙，请稍后再试');
        }
    }
    

    return <div className={styles.container}>
        <h1>TUTU会客室</h1>
        <Form
            form={form}
            onFinish={onFinish}
            colon={false}
            autoComplete="off"
        >
            <Form.Item
                label="用户名"
                name="username"
                rules={[{ message: '请输入用户名!' }]}
            >
                <Input />
            </Form.Item>

            <Form.Item
                label="昵称"
                name="nickName"
                rules={[{ message: '请输入昵称!' }]}
            >
                <Input />
            </Form.Item>

            <Form.Item
                label="密码"
                name="password"
                rules={[{ message: '请输入密码!' }]}
            >
                <Input.Password />
            </Form.Item>

            <Form.Item
                label="确认密码"
                name="confirmPassword"
                rules={[{ message: '请输入确认密码!' }]}
            >
                <Input.Password />
            </Form.Item>

            <Form.Item
                label="邮箱"
                name="email"
                rules={[
                    { message: '请输入邮箱!' },
                    { type: "email", message: '请输入合法邮箱地址!' }
                ]}
            >
                <Input />
            </Form.Item>

            <div className={styles.captcha_wrapper}>
                <Form.Item
                    label="验证码"
                    name="captcha"
                    rules={[{ message: '请输入验证码!' }]}
                >
                    <Input />
                </Form.Item>
                <Button className={styles.btn} type="primary" onClick={sendCaptcha}>发送验证码</Button>
            </div>

            <Form.Item
            >
                <div className='links'>
                    已有账号？去<Link to='/login'>登录</Link>
                </div>
            </Form.Item>

            <Form.Item
                label=" "
            >
                <Button className={styles.btn_register} type="primary" htmlType="submit">
                    注册
                </Button>
            </Form.Item>
        </Form>
    </div>
}

export default Register